<template>
    <div class="login">
        <div class="backgroundColorHeader"></div>
        <el-form>
            <el-row>
                <el-col :span="10" class="introduce">
                    <p>BOPU-UPMS</p>
                    <p>用户权限管理系统</p>
                </el-col>
                <el-col :span="14" class="form">
                    <p>登录/LOGIN</p>
                    <div>
                        <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                    </div>
                    <div>
                        <el-input v-model="form.password" show-password placeholder="请输入密码"></el-input>
                    </div>

                    <div>
                        <el-button type="primary" @click="login">登录</el-button>
                    </div>
                    <div>
                        <el-button>注册</el-button>
                        <el-button type="text">忘记密码?</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <div class="backgroundColorFooter"></div>
    </div>
</template>

<script>
import {login, getUserInfo} from '@/api/login';

export default {
    data() {
        return {
            form: {
                'account': '',
                'password': '',
                'platformCode': 'bopu-upms',
            }
        }
    }, 
    methods: {
        login() {
            if (this.form.account==='') {
                this.$message.error('请输入账号');
                return false;
            } else if (this.form.password==='') {
                this.$message.error('请输入密码');
                return false;
            }

            login(this.form.account, this.form.password, this.form.platformCode).then(Response => {
                const resp = Response.data;
                 window.console.log(resp.data.token)
                if (resp.flag) {
                    // 登录成功，通过token获取用户信息
                    getUserInfo(resp.data.token).then(Response => {
                        // 获取用户信息
                        const respUser = Response.data

                        if (respUser.flag) {
                            // 保存用户token 用户信息
                            localStorage.setItem('bopu-upms-token',resp.data.token);
                            localStorage.setItem('bopu-upms-user',JSON.stringify(respUser.data));
                            
                            // 前往首页
                            this.$message({
                                message: resp.message,
                                type: 'success'
                            });
                            this.$router.push({path: '/'})
                        } else {
                             this.$message.error(respUser.message);
                        }
                    })
                } else {
                    // 登录失败
                     this.$message.error(resp.message);
                }
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    .login {
        /* 登录表单 */
        .el-form {
            z-index: 999;
            overflow: auto;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            height: 400px;
            width: 900px;
            background-color: #FFF;

            .introduce {
                font-size: 20px;
                font-weight: bold;
                margin-top: 100px;
                text-align: center;
            }

            .form {
                margin-top: 30px;
                text-align: center;

                p:first-child {
                    font-weight: bold;
                    color: #29827a;
                }

                .el-input {
                    width: 340px;
                    margin-bottom: 10px;
                }
                .el-button {
                    width: 340px;
                    margin-bottom: 10px;
                }
            }
        }

        /* 背景色 */
        .backgroundColorHeader {
            position: absolute;
            top: 0px;
            left: 0px;
            right: 0px;
            height: 50%;
            background-color: #3BBFB4;
        }
        .backgroundColorFooter {
            position: absolute;
            top: 50%;
            left: 0px;
            right: 0px;
            height: 50%;
            background-color: #e9eef3;
        }
    }
</style>